<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓鼠の官网 | 程序猿的学习历程与作品集</title>
    <meta name="description" content="仓鼠的个人官网，记录软件学习生涯的学习历程和作品，包括部落仓鼠工具、仓鼠的博客等项目">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        /* 基础样式 */
:root {
    --primary-color: #6e45e2;
    --secondary-color: #88d3ce;
    --accent-color: #ff7e5f;
    --text-color: #333;
    --light-text: #666;
    --bg-color: #f9f9ff;
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-radius: 12px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    overflow-x: hidden;
    position: relative;
}

.highlight {
    color: var(--primary-color);
    font-weight: 500;
}

/* 网格背景 */
.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(var(--bg-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-color) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    opacity: 0.3;
}

/* 加载动画 */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loader p {
    margin-top: 20px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* 仓鼠加载动画 */
.hamster {
    position: relative;
    width: 80px;
    height: 50px;
}

.hamster .body {
    position: absolute;
    width: 50px;
    height: 30px;
    background-color: #f0c674;
    border-radius: 25px;
    top: 10px;
    left: 15px;
    animation: hamsterBody 1s infinite alternate;
}

.hamster .ear {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #d9a460;
    border-radius: 50%;
    top: 0;
    left: 25px;
}

.hamster .eye {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
    top: 15px;
    left: 35px;
}

.hamster .nose {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #333;
    border-radius: 50%;
    top: 20px;
    left: 45px;
}

.hamster .hand {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #d9a460;
    border-radius: 50%;
    top: 25px;
    left: 10px;
    animation: hamsterHand 1s infinite alternate;
}

.hamster .tail {
    position: absolute;
    width: 15px;
    height: 5px;
    background-color: #d9a460;
    border-radius: 5px;
    top: 25px;
    left: 60px;
    transform: rotate(30deg);
    animation: hamsterTail 1s infinite alternate;
}

@keyframes hamsterBody {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

@keyframes hamsterHand {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

@keyframes hamsterTail {
    0% { transform: rotate(30deg); }
    100% { transform: rotate(20deg); }
}

/* 导航栏 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.navbar.scrolled {
    padding: 15px 5%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    position: relative;
    transition: var(--transition);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn.primary {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: white;
    box-shadow: 0 5px 15px rgba(110, 69, 226, 0.3);
}

.btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(110, 69, 226, 0.4);
}

.btn.secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn.secondary:hover {
    background: var(--primary-color);
    color: white;
}

.btn.small {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #ddd;
    color: #666;
    border: none;
}

/* 英雄区域 */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 150px 5% 100px;
    min-height: 100vh;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    animation: fadeInUp 1s ease;
}

.title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.subtitle {
    font-size: 1.5rem;
    color: var(--light-text);
    margin-bottom: 30px;
    font-weight: 300;
}

.description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: var(--light-text);
}

.cta-buttons {
    display: flex;
    gap: 20px;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-placeholder {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -468px 0 }
    100% { background-position: 468px 0 }
}

/* 项目区域 */
.projects {
    padding: 100px 5%;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    z-index: -1;
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.project-card:hover::before {
    opacity: 0.1;
}

.project-image {
    height: 200px;
    overflow: hidden;
}

.project-image .image-placeholder {
    height: 100%;
}

.project-content {
    padding: 25px;
}

.project-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.project-description {
    color: var(--light-text);
    margin-bottom: 15px;
    line-height: 1.5;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.project-tags span {
    background-color: rgba(110, 69, 226, 0.1);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
}

/* 关于区域 */
.about {
    padding: 100px 5%;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    margin: 50px 0;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: var(--light-text);
}

.skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.skill-tag {
    background-color: rgba(136, 211, 206, 0.2);
    color: var(--primary-color);
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.skill-tag:hover {
    background-color: rgba(136, 211, 206, 0.4);
    transform: translateY(-2px);
}

/* 页脚 */
.footer {
    background-color: #fff;
    padding: 60px 5% 30px;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    text-decoration: none;
    color: var(--light-text);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(110, 69, 226, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    color: var(--light-text);
    font-size: 0.9rem;
}

/* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 992px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 120px;
        padding-bottom: 60px;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .hero-image {
        margin-top: 50px;
    }
    
    .title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .title {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
}
    </style>
</head>
<body>
    <!-- 动态网格背景 -->
    <div class="grid-bg"></div>
    
    <!-- 加载动画 -->
    <div class="loader">
        <div class="hamster">
            <div class="body"></div>
            <div class="ear"></div>
            <div class="eye"></div>
            <div class="nose"></div>
            <div class="hand"></div>
            <div class="tail"></div>
        </div>
        <p>加载中...</p>
    </div>
    
    <!-- 主容器 -->
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">
                <span>仓鼠の官网</span>
            </div>
            <div class="nav-links">
                <a href="#home" class="active">首页</a>
                <a href="#projects">项目</a>
                <a href="https://yzycoc.com/blog">博客</a>
                <a href="#about">关于</a>
            </div>
            <div class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </nav>
        
        <!-- 英雄区域 -->
        <section class="hero" id="home">
            <div class="hero-content">
                <h1 class="title">你好，我是<span class="highlight">仓鼠</span></h1>
                <p class="subtitle">一枚热爱编程的程序猿</p>
                <p class="description">这里记录了我的学习历程和创作作品，欢迎探索我的数字世界</p>
                <div class="cta-buttons">
                    <a href="#projects" class="btn primary">查看项目</a>
                    <a href="https://yzycoc.com/blog" class="btn secondary">阅读博客</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="image-placeholder" id="hero-image">
                    <!-- 图片将通过JavaScript加载 -->
                </div>
            </div>
        </section>
        
        <!-- 项目展示 -->
        <section class="projects" id="projects">
            <h2 class="section-title">我的<span class="highlight">项目</span></h2>
            <div class="projects-grid">
                <!-- 项目1 -->
                <div class="project-card" data-project="1">
                    <div class="project-image">
                        <div class="image-placeholder" id="project1-image"></div>
                    </div>
                    <div class="project-content">
                        <h3>部落仓鼠工具</h3>
                        <p class="project-description">QQ微信群部落冲突机器人 + 部落冲突阵型库</p>
                        <div class="project-tags">
                            <span>机器人</span>
                            <span>游戏工具</span>
                            <span>微信/QQ</span>
                        </div>
                        <a href="https://yzycoc.com/qq" target="_blank" class="btn small">访问项目</a>
                    </div>
                </div>
                
                <!-- 项目2 -->
                <div class="project-card" data-project="2">
                    <div class="project-image">
                        <div class="image-placeholder" id="project2-image"></div>
                    </div>
                    <div class="project-content">
                        <h3>仓鼠的博客</h3>
                        <p class="project-description">分享技术心得和学习历程的个人博客</p>
                        <div class="project-tags">
                            <span>技术博客</span>
                            <span>学习笔记</span>
                            <span>经验分享</span>
                        </div>
                        <a href="https://yzycoc.com/blog" target="_blank" class="btn small">访问博客</a>
                    </div>
                </div>
                
                <!-- 项目3 -->
                <div class="project-card" data-project="3">
                    <div class="project-image">
                        <div class="image-placeholder" id="project3-image"></div>
                    </div>
                    <div class="project-content">
                        <h3>仓鼠API服务</h3>
                        <p class="project-description">提供各种实用API接口的服务平台</p>
                        <div class="project-tags">
                            <span>API服务</span>
                            <span>开发中</span>
                        </div>
                        <a href="#" class="btn small disabled" id="api-btn">暂未开放</a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 关于我 -->
        <section class="about" id="about">
            <div class="about-content">
                <h2 class="section-title">关于<span class="highlight">我</span></h2>
                <p>我是一名热爱编程的开发者，专注于学习和创造有价值的软件工具。通过这个网站，我希望记录并分享我的学习历程，同时也为他人提供有用的工具和服务。</p>
                <p>我的兴趣包括但不限于：Web开发、自动化工具、游戏辅助开发和技术写作。</p>
                <div class="skills">
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">Python</span>
                    <span class="skill-tag">HTML/CSS</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">自动化</span>
                    <span class="skill-tag">Web开发</span>
                </div>
            </div>
        </section>
        
        <!-- 页脚 -->
        <footer class="footer">
            <div class="footer-content">
                <div class="footer-logo">
                    <span>仓鼠の官网</span>
                </div>
                <div class="footer-links">
                    <a href="#home">首页</a>
                    <a href="#projects">项目</a>
                    <a href="https://yzycoc.com/blog">博客</a>
                    <a href="#about">关于</a>
                </div>
                <div class="social-links">
                    <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
                    <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" aria-label="WeChat"><i class="fab fa-weixin"></i></a>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 仓鼠の官网. 保留所有权利.</p>
            </div>
        </footer>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    // 模拟加载延迟
    setTimeout(function() {
        document.querySelector('.loader').style.opacity = '0';
        setTimeout(function() {
            document.querySelector('.loader').style.display = 'none';
        }, 500);
    }, 1500);
    
    // 滚动时导航栏效果
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            document.querySelector('.navbar').classList.add('scrolled');
        } else {
            document.querySelector('.navbar').classList.remove('scrolled');
        }
    });
    
    // 图片懒加载
    function lazyLoadImages() {
        const images = [
            {
                id: 'hero-image',
                url: 'https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80',
                alt: '程序员工作场景'
            },
            {
                id: 'project1-image',
                url: 'https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80',
                alt: '部落冲突游戏截图'
            },
            {
                id: 'project2-image',
                url: 'https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80',
                alt: '博客写作场景'
            },
            {
                id: 'project3-image',
                url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
                alt: 'API开发场景'
            }
        ];
        
        images.forEach(img => {
            const placeholder = document.getElementById(img.id);
            if (placeholder) {
                const image = new Image();
                image.src = img.url;
                image.alt = img.alt;
                image.onload = function() {
                    placeholder.innerHTML = '';
                    placeholder.appendChild(image);
                    placeholder.style.background = 'none';
                    image.style.width = '100%';
                    image.style.height = '100%';
                    image.style.objectFit = 'cover';
                    image.style.objectPosition = 'center';
                };
            }
        });
    }
    
    // 延迟加载图片
    setTimeout(lazyLoadImages, 1000);
    
    // API按钮提示
    document.getElementById('api-btn').addEventListener('click', function(e) {
        e.preventDefault();
        alert('仓鼠API服务目前暂未开放分享，敬请期待！');
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 移动端菜单
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navLinks = document.querySelector('.nav-links');
    
    if (mobileMenuBtn && navLinks) {
        mobileMenuBtn.addEventListener('click', function() {
            navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
        });
        
        // 点击链接后关闭菜单
        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function() {
                if (window.innerWidth <= 768) {
                    navLinks.style.display = 'none';
                }
            });
        });
    }
    
    // 项目卡片动画
    const projectCards = document.querySelectorAll('.project-card');
    projectCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = `all 0.5s ease ${index * 0.1}s`;
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 500 + (index * 100));
    });
});
    </script>
</body>
</html>